import React from 'react'
import Elements from '@models/Elements'
import './index.css'

interface IProps {
  groups: Array<string>
  elements: Array<Elements>
}

const ToolBar: React.FunctionComponent<IProps> = ({ groups, elements }) => {
  return (
    <div className='tool-bar'>
      {groups.map((g: string, idx: number) => (
        <div key={g + idx}>
          <p>{g}</p>
          <ul className='elements-list'>
            {elements
              .filter((e: Elements) => e.group === g)
              .map((el: Elements) => (
                <li
                  key={el.key}
                  draggable='true'
                  onDragStart={(e) =>
                    e.dataTransfer.setData('el', JSON.stringify(el))
                  }
                  title={el.label}
                >
                  <i className={`iconfont ${el.icon}`}></i>
                </li>
              ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

export default ToolBar
